<script lang="ts" setup>
import { useRouter } from 'vue-router';
import Client from "../../../req/common.js";

const router = useRouter();

const props = defineProps({
  iNow: {
    default: 0
  }
});

const chackLogin = () => {
  if(Client.getStore("feiyuToken")){
    return true;
  }else{
    return false;
  }
}

const toRouteFn = (str:any) => {
  if(str){
    router.push({path: str})
  }else{
    if(chackLogin()){
      router.push({path: "/personal"})
    }else{
      router.push({path: "/login"});
    }
  }
};
</script>
<template>
  <section class="commonNavUtil">
    <div class="item home-icon" @click="toRouteFn('/')" :class="{'home-icon2': iNow==0}"></div>
    <div class="item sort-icon" @click="toRouteFn('/productSort')" :class="{'sort-icon2': iNow==1}"></div>
    <!-- <div class="item buy-icon" @click="toRouteFn('/groupBuy')" ></div> -->
    <div class="item car-icon" @click="toRouteFn('/cart')"></div>
    <div class="item" :class="{'my-icon': !chackLogin(),'my-icon2': (chackLogin() && iNow==5),'my-icon3': (chackLogin() && iNow!=5)}" @click="toRouteFn()"></div>
  </section>
</template>

<style lang="less" scoped>
.commonNavUtil {
  width: 3.75rem;
  height: .5rem;
  background: white;
  display: flex;
  position: relative;
  &::before {
    width: 100%;
    content: "";
    height: 0rem;
    border-top: 0.01rem solid transparent;
    position: absolute;
    background: #f5f5f5;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .item {
    width: 25%;
    height: .5rem;
    background-size: contain !important;
    &.home-icon {
      background: url("../../../assets/images/home-icon-1.png")no-repeat center;
    }
    &.home-icon2 {
      background: url("../../../assets/images/home-icon-2.png")no-repeat center;
    }
    &.sort-icon {
      background: url("../../../assets/images/sort-icon-1.png")no-repeat center;
    }
    &.sort-icon2 {
      background: url("../../../assets/images/sort-icon-2.png")no-repeat center;
    }
    &.buy-icon {
      background: url("../../../assets/images/buy-icon-1.png")no-repeat center;
    }
    //  &.buy-icon2 {
    //   background: url("../../../assets/images/buy-icon-1.png")no-repeat center;
    // }
    &.car-icon {
      background: url("../../../assets/images/car-icon-1.png")no-repeat center;
    }
    &.my-icon {
      background: url("../../../assets/images/my-icon-1.png")no-repeat center;
    }
    &.my-icon2 {
      background: url("../../../assets/images/my-icon-2.png")no-repeat center;
    }
    &.my-icon3 {
      background: url("../../../assets/images/my-icon-3.png")no-repeat center;
    }
  }
}
</style>
